
<template>
  <div class='total-sales'>
    <common-card title="累计用户数" :value="userToday">
      <template>
        <v-chart :options="getOptions()"></v-chart>
        <!-- <div id="total-users-chart"  ref="totalUsersChart" :style="{width: '100%',height: '100%'}"></div> -->
      </template>
      <template v-slot:footer>
        <span>日同比  </span>
        <span class="emphasis " style="padding-right:10px;">{{userGrowthLastDay}}  <span  class="increase in-block"></span></span>
        <span>月同比  </span>
        <span class="emphasis">{{userGrowthLastMonth}} <span class="decrease in-block"></span></span>
      </template>
    </common-card>
  </div>
</template>
<script>
import CommonCardMixin from '../../mixins/commonCardMixin'
import CommonDataMixin from '../../mixins/commonDataMixin'
export default {
  mixins: [CommonCardMixin, CommonDataMixin],
  methods: {
    getOptions () {
      return {
        color: ['#3398DB'],
        series: [
          {
            name: '上月平台用户数',
            type: 'bar',
            stack: '总量',
            data: [this.userLastMonth],
            barWidth: 10,
            itemStyle: {
              color: '#45c946'
            }
          },
          {
            name: '今日平台用户数',
            type: 'bar',
            data: [this.userTodayNumber],
            stack: '总量', // 设置是否合并一行
            itemStyle: {
              color: '#eee'
            }
          },
          {
            type: 'custom',
            data: [this.userLastMonth],
            stack: '总量',
            renderItem: (params, api) => {
              const value = api.value(0)
              const endPoint = api.coord([value, 0])
              console.log(value, endPoint)
              return {
                type: 'group',
                children: [{
                  type: 'path',
                  position: endPoint,
                  shape: {
                    d: 'M880.329 819.111l-738.624 0 365.941-633.227z',
                    x: -10,
                    y: 10,
                    width: 20,
                    height: 20,
                    layout: 'cover'
                  },
                  style: {
                    fill: 'red'
                  }
                },
                {
                  type: 'path',
                  position: endPoint,
                  shape: {
                    d: 'M882.78823837 388.39763619l-370.80552035 370.72382366-370.76624311-370.72382366 741.57647673 0z',
                    x: -10,
                    y: -30,
                    width: 20,
                    height: 20,
                    layout: 'cover'
                  },
                  style: {
                    fill: 'red'
                  }
                }]
              }
            }
          }
        ],
        xAxis: {
          show: false,
          type: 'value',
          data: ['00:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00']
        },
        yAxis: {
          show: false,
          type: 'category'
        },
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0
        }
      }
    }
  }
}
</script>
<style scoped >
.in-block {
  display:inline-block;
}
</style>
